<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小车动画</title>
	<style type="text/css">
		.container{
			margin-top: 30px;
			width: 100px;
			height: 70px;
			
		}
		.car{
			width: 100px;
			height: 50px;
			background-color: pink;
			transform: rotate(90deg);
			animation: car 10s linear infinite;
		}
		.whells{
			width: 100px;
			height: 20px;
			
			animation: whells 10s linear infinite;
		}
		.whell1,.whell2{
			width: 20px;
			height: 20px;
			border-radius: 10px;
			background-color: pink;
			float: left;
			text-align: center;
			line-height: 20px;
			font-size: 20px;
			color: white;
			animation: whell 10s linear infinite;
		}
		.whell1{
			margin-right:55px;
		}
	@keyframes car{
		0%{
			transform:translateX(0px) translateY(0px);
		}
		20%{
			transform:translateX(500px) translateY(0px) rotate(0deg);
		}
		25%{
			transform:translateX(500px) translateY(0px) rotate(90deg);
		}
		45%{
			transform:translateX(500px) translateY(500px) rotate(90deg);
		}
		50%{
			transform:translateX(500px) translateY(500px);
		}
		70%{
			transform:translateX(0px) translateY(500px) rotate(0deg);	
		}
		75%{
			transform:translateX(0px) translateY(500px) rotate(90deg);
		}
		95%{
			transform:translateX(0px) translateY(0px) rotate(90deg);	
		}
		100%{
			transform:translateX(0px) translateY(0px);
		}
	}
	@keyframes whells{
		0%{
			transform:translateX(0px) translateY(0px);
		}
		20%{
			transform-origin: 50px -25px;
			transform:translateX(500px) translateY(0px) rotate(0deg);
		}
		25%{
			transform-origin: 50px -25px;
			transform:translateX(500px) translateY(0px) rotate(90deg);
		}
		45%{	
			transform-origin: 50px -25px;
			transform:translateX(500px) translateY(500px) rotate(90deg);
		}
		50%{	
			transform-origin: 50px -25px;
			transform:translateX(500px) translateY(500px);
		}
		70%{	
			transform-origin: 50px -25px;
			transform:translateX(0px) translateY(500px) rotate(0deg);	
		}
		75%{	
			transform-origin: 50px -25px;
			transform:translateX(0px) translateY(500px) rotate(90deg);
		}
		95%{	
			transform-origin: 50px -25px;
			transform:translateX(0px) translateY(0px) rotate(90deg);	
		}
		100%{	
			transform-origin: 50px -25px;
			transform:translateX(0px) translateY(0px);
		}
	}
	@keyframes whell{
		0%{
			transform:rotate(0deg);
		}
		20%{
			transform: rotate(1800deg);
		}
		25%{
			transform: rotate(1800deg);
		}
		45%{
			transform: rotate(3600deg);
		}
		50%{
			transform:rotate(3600deg);
		}
		70%{
			transform: rotate(1800deg);
		}
		75%{
			transform: rotate(1800deg);
		}
		95%{
			transform: rotate(0deg);	
		}
		100%{
			transform: rotate(0deg);
		}
	}
	</style>
</head>
<body>
	<div class="container">
		<div class="car"></div>
		<div class="whells">
		<div class="whell1">十</div>
		<div class="whell2">十</div>
		</div>
    </div>
</body>
</html>